<template>
  <div>
    <van-tabbar active="active" class="footer" :placeholder=true>
      <van-tabbar-item v-for='(item,index) of items' @click="$router.push(item.push)">
        <div class="footerDiv" >
          <img :src="item.icon">
          <p>{{item.name}}</p>
        </div>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
    import home from "@/assets/首页.png";
    import community from "@/assets/社区.png";
    import shares from "@/assets/关注.png";
    import mine from "@/assets/我的.png";

    export default {
      name: "IndexFooter",
      data() {
        return {
          input: '',
          select: '',
          categoryList:[],
          categoryGroupList:[],
          address:"位置",
          items:[{
            cls:"home",
            name:"首页",
            push:"/app/index",
            icon: home,
            iconSelect:"../public/static/首页.png"
          },
            {
              cla:"community",
              name:"社区",
              push:"#",
              icon:community,
              iconSelect:"../static/home_select.png"
            },
            {
              cls:"shares",
              name:"关注",
              push:"#",
              icon:shares,
              iconSelect:"../static/home_select.png"
            },
            {
              cla:"mine",
              name:"我的",
              push:"/app/user/self",
              icon:mine,
              iconSelect:"../static/home_select.png"
            }]

        }
      }
    }
</script>

<style scoped>
  .footer{
    text-align: center;
  }
  .footerDiv img{
    width: 30%;
    height: 30%;
  }
</style>
